<template>
  <div class="flex flex-wrap items-center my-[10px] ml-[45px]">
    <el-button
      @click="gotoHomeView"
      class="!mr-[20px] w-[250px] box-border !h-[35px]"
    >
      <img
        class="w-[18px] mx-[10px]"
        src="@renderer/assets/images/xin_jian_wenj.png"
      />新建文件<el-icon class="ml-[50px]"><Plus /></el-icon>
    </el-button>

    <el-button @click="importFileHandle" class="w-[250px] !h-[35px]">
      <img
        class="w-[18px] mx-[10px]"
        src="@renderer/assets/images/dao_ru_wenj.png"
      />导入文件<el-icon class="ml-[50px]"><Plus /></el-icon>
    </el-button>

    <el-dialog v-model="dialogVisible" title="请选择大屏尺寸" width="500">
      <el-form
        label-width="auto"
        :model="states"
        size="default"
        class="px-[10px]"
      >
        <el-form-item label="推荐分辨率" class="my-[10px]">
          <el-select
            v-model="resolutionRatio"
            placeholder="请选择"
            @change="changeRatio"
          >
            <el-option
              v-for="item in ratioOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="大屏宽度" class="my-[10px]">
          <el-input-number :max="4000" v-model="states.width" />
        </el-form-item>
        <el-form-item label="大屏高度" class="my-[10px]">
          <el-input-number :max="3000" v-model="states.height" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 新建 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { importFile } from "@renderer/utils/operationCode";
import { ref } from "vue";
const router = useRouter();
let ratioOption = ref([
  {
    label: "1024*768",
    value: "1024*768",
  },
  {
    label: "1280*720",
    value: "1280*720",
  },
  {
    label: "1920*1080",
    value: "1920*1080",
  },
  {
    label: "2560*1440",
    value: "2560*1440",
  },
  {
    label: "3840*2160",
    value: "3840*2160",
  },
]);

let states = ref<any>({
  width: 1920,
  height: 1080,
});
let resolutionRatio = ref("1920*1080");
const changeRatio = (val: string) => {
  let arr = val.split("*");
  states.value.width = Number(arr[0]);
  states.value.height = Number(arr[1]);
};
const gotoHomeView = () => {
  dialogVisible.value = true;
};

const confirm = () => {
  router.push({
    path: "/editContainer",
    query: {
      size: JSON.stringify(states.value),
    },
  });
};
let dialogVisible = ref(false);
const importFileHandle = async () => {
  let file = await importFile();
  if (file) {
    ElMessage.success("正在导入中");
    router.push({
      path: "/editContainer",
      query: {
        file: JSON.stringify(file),
      },
    });
  }
};
</script>
<style scoped lang="scss">
:deep(.el-button:hover) {
  background-color: #232324 !important;
}
</style>
